<template>
    <div class="tab-content">
        <!-- 运行时控数据配置 -->
        <div class="instantaneous-power-section">
            <div class="section-header">
                <h3>运行时控数据配置</h3>
                <div class="header-actions">
                    <el-button type="primary" size="small" @click="fillRandomInstantaneousPowerData">随机填充</el-button>
                    <el-button type="warning" size="small" @click="clearInstantaneousPowerData">清空数据</el-button>
                    <el-button type="success" size="small" @click="saveInstantaneousPowerData">保存配置</el-button>
                </div>
            </div>
            
            <div class="data-form-container">
                <el-form :model="instantaneousPowerForm" label-width="0">
                    <div class="hour-grid">
                        <div v-for="(item, index) in instantaneousPowerForm.data" :key="index" class="hour-item">
                            <div class="hour-card">
                                <div class="hour-header">
                                    <span class="time-label">{{ item.time }}</span>
                                    <el-button size="small" type="text" @click="resetHourValue(item)" class="reset-btn">重置</el-button>
                                </div>
                                <div class="hour-input">
                                    <el-input-number 
                                        v-model="item.value" 
                                        :min="0" 
                                        :max="2000" 
                                        :step="10"
                                        size="small"
                                        class="value-input"
                                        controls-position="right"
                                    />
                                    <span class="unit-label">kW</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDataClassifyDetail, updateDataClassify } from '@/api/port'







// ========================================================================================
// 模块1: 运行时控数据配置
// ========================================================================================

// 运行时控数据表单
const instantaneousPowerForm = reactive({
    data: Array.from({ length: 24 }, (_, i) => ({
        hour: i, // X轴数据：0-23小时
        time: `${i.toString().padStart(2, '0')}:00`, // 时间显示格式
        value: 0 // Y轴数据：随机值100-1100
    }))
})

// 运行时控数据
const saveInstantaneousPowerData = async () => {
    try {
        await updateDataClassify({
            id: 5,
            key: 'module5',
            value: instantaneousPowerForm.data
        })
        console.log('运行时控数据配置:', toRaw(instantaneousPowerForm))
        ElMessage.success('运行时控数据配置保存成功')
    } catch (error) {
        ElMessage.error('保存失败，请重试')
    }
}

// 随机填充运行时控数据
const fillRandomInstantaneousPowerData = () => {
    instantaneousPowerForm.data.forEach(item => {
        item.value = Math.floor(Math.random() * 21)
    })
    ElMessage.success('随机数据填充完成！')
}

// 清空运行时控数据
const clearInstantaneousPowerData = () => {
    instantaneousPowerForm.data.forEach(item => {
        item.value = 0
    })
    ElMessage.success('数据已清空！')
}

// 重置单个小时的数值
const resetHourValue = (item: any) => {
    item.value = 0
    ElMessage.success(`${item.time}数据已重置！`)
}
onMounted(() => {

   

})

const init = async (moduleData: any) => {
    instantaneousPowerForm.data = moduleData.map((item: any) => ({
        ...item,
        hour: Number(item.hour),
        value: Number(item.value)
    }))

}

defineExpose({
    init
})

</script>
<style scoped>
    .instantaneous-power-section .hour-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        margin-top: 16px;
    }

    .instantaneous-power-section .hour-item {
        width: 100%;
    }

    .instantaneous-power-section .hour-card {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 12px;
        transition: all 0.3s ease;
        height: 100%;
    }

    .instantaneous-power-section .hour-card:hover {
        background: #e3f2fd;
        border-color: #2196f3;
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
    }

    .instantaneous-power-section .hour-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .instantaneous-power-section .time-label {
        font-weight: 600;
        color: #409eff;
        background: #ecf5ff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

    .instantaneous-power-section .hour-input {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .instantaneous-power-section .value-input {
        flex: 1;
    }

    .instantaneous-power-section .unit-label {
        color: #666;
        font-size: 12px;
        font-weight: 500;
    }

    .instantaneous-power-section .reset-btn {
        color: #f56c6c;
        font-size: 11px;
        padding: 2px 6px;
        min-height: auto;
    }

    .instantaneous-power-section .reset-btn:hover {
        background-color: #fef0f0;
        color: #f56c6c;
    }

    @media (max-width: 1200px) {
        .instantaneous-power-section .hour-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .instantaneous-power-section .hour-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .instantaneous-power-section .hour-grid {
            grid-template-columns: 1fr;
        }
    }
</style>